﻿<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="./css/Initialization.css"/>
	<link rel="stylesheet" type="text/css" href="./css/Header.css"/>
	<link rel="stylesheet" type="text/css" href="./css/contents.css"/>
	<link rel="stylesheet" type="text/css" href="./css/footer.css"/>
	<link href='http://fonts.googleapis.com/css?family=Chela+One' rel='stylesheet' type='text/css'>
</head>
<body>
<header id="main_header" class="">
	<hgroup id="title">
		<h1>처음 만들어본 홈페이지</h1>

		<h2>HTML5+CSS3</h2>
	</hgroup>
	<nav id="main_gnb" class="">
		<ul>
			<li><a href="#">Webdd</a></li>
			<li><a href="#">Mobile</a></li>
			<li><a href="#">Game</a></li>
			<li><a href="#">Simulation</a></li>
			<li><a href="#">Data</a></li>
		</ul>
	</nav>

	<nav id="main_lnb" class="">
		<ul>
			<li><a href="#">HTML5</a></li>
			<li><a href="#">CSS3</a></li>
			<li><a href="#">JavaScript</a></li>
			<li><a href="#">jQuery</a></li>
			<li><a href="#">Node.js</a></li>
		</ul>
	</nav>
</header>
<div id="content">
	<section id="main_section" class="picker">
		<article class="main_article">
			<h1>Main Article</h1>

			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
				industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
				scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
				into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
				release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
				software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</article>
		<article class="main_article">
			<h1>Main Article</h1>

			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
				industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
				scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
				into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
				release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
				software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</article>
		<article class="main_article">
			<h1>Main Article</h1>

			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
				industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
				scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
				into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
				release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
				software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</article>
	</section>
	<aside id="main_aside" class="picker">
		<input name="tab" id="first" type="radio" checked=""/>
		<input name="tab" id="second" type="radio"/>
		<section class="buttons">
			<label for="first">First</label>
			<label for="second">Second</label>
		</section>
		<div class="tab_item">
			<ul>
				<li>
					<a href="#">
						<div class="thumnail">
							<img src="http://placehold.it/45x45" alt=""/>
						</div>
						<div class="description">
							<strong>HTML5_00sdfsdfsdf</strong>
							<p>2013-05-29</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="thumnail">
							<img src="http://placehold.it/45x45" alt=""/>
						</div>
						<div class="description">
							<strong>HTML5_01</strong>
							<p>2013-05-29</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="thumnail">
							<img src="http://placehold.it/45x45" alt=""/>
						</div>
						<div class="description">
							<strong>HTML5_02</strong>
							<p>2013-05-29</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="thumnail">
							<img src="http://placehold.it/45x45" alt=""/>
						</div>
						<div class="description">
							<strong>HTML5_03</strong>
							<p>2013-05-29</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="thumnail">
							<img src="http://placehold.it/45x45" alt=""/>
						</div>
						<div class="description">
							<strong>HTML5_04</strong>
							<p>2013-05-29</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="tab_item">
			<ul>
				<li><a href="#">CSS_05</a></li>
				<li><a href="#">CSS_06</a></li>
				<li><a href="#">CSS_07</a></li>
				<li><a href="#">CSS_08</a></li>
				<li><a href="#">CSS_09</a></li>
			</ul>
		</div>
	</aside>
</div>
<footer id="main_footer">
	<h3>Footer</h3>
	<address>Website Layout Basic</address>
</footer>
</body>
</html>

















